<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span
          style="
            display: inline-block;
            width: calc(100% - 51px);
            padding-right: 10px;
            text-align: right;
          "
        >
          <a-button
            @click="toggleScreen"
            icon="appstore"
            style="height: 20px; width: 20px; border: 0px"
          >
          </a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="所属设备"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备"
            :disabled="true"
            v-decorator.trim="['devName', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="所属设备编号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备编号"
            :disabled="true"
            v-decorator.trim="['devCode', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="所属设备编码通道"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备编码通道"
            :disabled="true"
            v-decorator.trim="['relationDeviceIndex', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="摄像机名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :maxLength="40"
            placeholder="摄像机名称"
            v-decorator.trim="['name', validatorRules.notBlank]"
            :disabled="this.title == '详情' ? true : false"
          />
        </a-form-item>
        <a-form-item
          label="摄像机描述"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :maxLength="40"
            placeholder="摄像机描述"
            v-decorator.trim="['cameraDesc', validatorRules.notBlank]"
            :disabled="this.title == '详情' ? true : false"
          />
        </a-form-item>
        <a-form-item
          label="摄像机地点"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :maxLength="40"
            placeholder="摄像机地点"
            v-decorator.trim="['location', validatorRules.notBlank]"
            :disabled="this.title == '详情' ? true : false"
          />
        </a-form-item>
        <a-form-item
          label="是否启用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group
            v-decorator.trim="['used', validatorRules.notBlank]"
            :disabled="this.title == '详情' ? true : false"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <div class="drawer-bootom-button" v-show="!disableSubmit">
          <a-popconfirm
            title="确定放弃编辑？"
            @confirm="handleCancel"
            okText="确定"
            cancelText="取消"
          >
            <a-button style="margin-right: 0.8rem">取消</a-button>
          </a-popconfirm>
          <a-button
            @click="handleSubmit"
            type="primary"
            :loading="confirmLoading"
            :disabled="this.title == '详情' ? true : false"
            >提交</a-button
          >
        </div>
      </a-form>
    </a-spin>
    <h2>参数设置</h2>
    <el-form
      ref="forms"
      :model="forms"
      label-width="auto"
      :spinning="confirmLoading"
      :rules="rules"
    >
      <el-form-item
        label="码流封装方式"
        style="padding-left: 38px"
        :required="true"
      >
        <el-select
          v-model="forms.package_format.defaultValue.name"
          placeholder="码流封装方式"
          style="width: 431px"
          :disabled="disableStatus ||  this.title == '详情' ? true : false"
        >
          <el-option
            v-for="item in forms.package_format.groupValue"
            :key="item.key"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="视频编码"
        style="padding-left: 38px"
        :required="true"
      >
        <el-select
          v-model="forms.v_encode.defaultValue.name"
          prop="v_encode"
          style="width: 431px"
          placeholder="视频编码"
          :disabled="disableStatus || this.title == '详情' ? true : false"
        >
          <el-option
            v-for="item in forms.v_encode.groupValue"
            :key="item.key"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="视频分辨率"
        style="padding-left: 38px"
        :required="true"
      >
        <el-select
          v-model="forms.v_resolution.defaultValue.name"
          prop="v_resolution"
          style="width: 431px"
          placeholder="视频分辨率"
          :disabled="disableStatus || this.title == '详情' ? true : false"
        >
          <el-option
            v-for="item in forms.v_resolution.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="视频高" style="padding-left: 38px">
        <el-input
          v-model="forms.v_height"
          placeholder="视频高"
          prop="v_height"
          clearable
          style="width: 431px"
          :maxlength="20"
          :disabled="disableStatus"
        ></el-input>
      </el-form-item> -->
      <el-form-item
        label="视频帧率"
        style="padding-left: 38px"
        prop="v_framerate.defaultValue"
        :rules="{ required: true, message: '内容不能为空', trigger: 'change' }"
      >
        <el-input
          v-model="forms.v_framerate.defaultValue"
          placeholder="视频帧率"
          clearable
          style="width: 431px"
          :disabled="disableStatus || this.title == '详情' ? true : false"
          :maxlength="20"
          oninput="value=value.replace(/[^0-9]/g,'')"
          @blur="handlerFramerate"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="视频码率"
        style="padding-left: 38px"
        prop="v_bitrate.defaultValue"
        :rules="{ required: true, message: '内容不能为空', trigger: 'change' }"
      >
        <el-input
          :maxlength="20"
          v-model="forms.v_bitrate.defaultValue"
          placeholder="视频码率"
          clearable
          style="width: 431px"
          :disabled="disableStatus ||  this.title == '详情' ? true : false"
          oninput="value=value.replace(/[^0-9]/g,'')"
        ></el-input
        ><span style="padding-left: 10px">Kbps</span>
      </el-form-item>
      <el-form-item
        label="音频编码"
        style="padding-left: 38px"
        :required="true"
      >
        <el-select
          v-model="forms.a_encode.defaultValue.name"
          placeholder="音频编码"
          style="width: 431px"
          prop="a_encode"
          :disabled="disableStatus || this.title == '详情' ? true : false"
        >
          <el-option
            v-for="item in forms.a_encode.groupValue"
            :key="item.key"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="音频采样率"
        style="padding-left: 38px"
        prop="a_samplerate.defaultValue"
        :rules="{ required: true, message: '内容不能为空', trigger: 'change' }"
      >
        <el-input
          :maxlength="20"
          v-model="forms.a_samplerate.defaultValue"
          placeholder="音频采样率"
          clearable
          style="width: 431px"
          :disabled="disableStatus || this.title == '详情' ? true : false"
          oninput="value=value.replace(/[^0-9]/g,'')"
        ></el-input
        ><span style="padding-left: 10px">KHz</span>
      </el-form-item>
      <!-- <el-form-item label="音频采样率" :required="true">
        <el-select
          v-model="forms.a_samplerate"
          placeholder="音频采样率"
          prop="a_samplerate"
          clearable
        >
        </el-select>
      </el-form-item> -->
      <el-form-item
        label="音频码率"
        style="padding-left: 38px"
        prop="a_bitrate.defaultValue"
        :rules="{ required: true, message: '内容不能为空', trigger: 'change' }"
      >
        <el-input
          v-model="forms.a_bitrate.defaultValue"
          placeholder="音频码率"
          :disabled="disableStatus  || this.title == '详情' ? true : false"
          clearable
          style="width: 431px"
          :maxlength="20"
          oninput="value=value.replace(/[^0-9]/g,'')"
        ></el-input
        ><span style="padding-left: 10px">Kbps</span>
      </el-form-item>
      <!-- <el-form-item label="码率范围取值" style="margin-left:20px;display: inline-block;">
          <el-input v-model="forms.a_encode.defaultValue" prop="a_encode"  disabled clearable style="width:205px;"></el-input>
        </el-form-item> -->
      <el-form-item
        label="编码档次"
        style="padding-left: 38px"
        :required="true"
      >
        <el-select
          v-model="forms.profile.defaultValue.name"
          placeholder="编码档次"
          style="width: 431px"
          prop="profile"
          :disabled="disableStatus || this.title == '详情' ? true : false"
        >
          <el-option
            v-for="item in forms.profile.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="码率控制"
        style="padding-left: 38px"
        :required="true"
      >
        <el-select
          v-model="forms.rc_mode.defaultValue.name"
          placeholder="码率控制"
          style="width: 431px"
          prop="rc_mode"
          :disabled="disableStatus || this.title == '详情' ? true : false"
        >
          <el-option
            v-for="item in forms.rc_mode.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button
        @click="handleSubmits"
        type="primary"
        :loading="confirmLoading"
        :disabled="disableStatus || this.title == '详情' ? true : false"
        >提交</a-button
      >
    </div>
    <!-- <div class="drawer-bootom-button" v-show="!disableSubmit">
			<a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
				<a-button style="margin-right: .8rem">取消</a-button>
			</a-popconfirm>
			<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
		</div> -->
  </a-drawer>
</template>

<script>
import pick from "lodash.pick";
import { postAction } from "@/api/manage";
import { devList, cameraEdit, cameraTbdEdit } from "@/api/api";
import { encode } from "punycode";
export default {
  props: ["forms", "cameraId"],
  name: "CameraTbdEditModal",
  components: {},
  data() {
    return {
      devId: undefined,
      ptzProtocolList: [],
      model: {},
      disableStatus: false,
      form: this.$form.createForm(this),
      validatorRules: {
        notBlank: {
          rules: [
            {
              required: true,
              message: "请输入必填项!",
            },
          ],
        },
      },
      // cameraId:'',
      // forms: {
      //   package_format: "",
      //   v_encode: "",
      //   v_framerate: "",
      //   v_bitrate: "",
      //   v_width: "",
      //   v_height: "",
      //   a_encode: "",
      //   a_samplerate: "",
      //   a_bitrate: "",
      //   profile: "",
      //   rc_mode: "",
      // },
      title: "编辑",
      visible: false,
      modaltoggleFlag: true,
      confirmDirty: false,
      disableSubmit: false,
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      modalWidth: 800,
      drawerWidth: 700,
      confirmLoading: false,
      //   rules: {
      //     a_bitrate: [
      //         { required: true, message: "请输入活动名称", trigger: "blur" },
      //       { min: 4800, max: 320000, trigger: "blur" },
      //     ],
      //   },
    };
  },
  created() {
    // console.log(this.props);
  },
  mounted() {
    // console.log(this.props);
  },
  computed: {},
  methods: {
    // selectOrderId(e) {
    // 	console.log(e)
    //   const item = this.forms.a_encode.groupValue.find(item1=>item1.name == this.forms.a_encode.defaultValue)
    //   console.log(item);
    //   this.forms.a_encode.defaultValue = item.range;
    // },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    show(record) {
      console.log(this.forms);
      console.log(this.form);

      if (record.state == "1") {
        console.log("=======在线=======");
        this.disableStatus = false;
      } else {
        this.disableStatus = true;
        console.log("=========离线========");
      }

      // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.resetScreenSize();
      this.form.resetFields();

      try {
        this.ptzProtocolList = record.ptzProtocolGroup.split(";");
        //绑定数据
      } catch (e) {
        //TODO handle the exception
        console.log("获取云台协议组失败！" + e);
      }

      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        console.log("11111111111");
        setTimeout(() => {
          this.form.setFieldsValue({
            devName: record.devName,
            devCode: record.devCode,
            relationDeviceIndex: record.relationDeviceIndex,
            name: record.name,
            cameraDesc: record.cameraDesc,
            location: record.location,
            used: record.used,
          });
        }, 200);
      });

      // 地址显示判断
      if (this.forms.profile.defaultValue == undefined) {
        this.forms.profile = [];
        this.forms.profile.defaultValue = "";
      }
      if (this.forms.rc_mode.defaultValue == undefined) {
        this.forms.rc_mode = [];
        this.forms.rc_mode.defaultValue = "";
      }

      // this.$nextTick(() => {
      //   this.form.setFieldsValue(
      //     pick(
      //       this.model,
      //       "devName",
      //       "devCode",
      //       "relationDeviceIndex",
      //       "name",
      //       "cameraDesc",
      //       "location",
      //       "used",
      //       "ptzProtocol"
      //     )
      //   );
      // });
      // this.$nextTick(() => {
      // 	this.forms.setFieldsValue(pick(this.model, 'package_format','a_bitrate',
      // 	'a_encode','profile','rc_mode','v_bitrate','v_encode',
      // 	'v_framerate'))
      // });
      // this.visible = true;
    },
    close() {
      this.$emit("close");
      this.visible = false;
      this.disableSubmit = false;
    },
    handleSubmit() {
      //编辑设备
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          console.log(formData);
          postAction("/dev/camera/edit", formData)
            .then((res) => {
              if (res.code == "00000") {
                //子类绑定父类引组件的方法
                that.$emit("ok");
                that.$message.success("操作成功");
              } else {
                that.$message.warning("操作失败" + res.msg);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    // onMindchange(e) {
    // console.log(e)
    //   if (this.forms.a_encode.groupValue === 0) {
    // 	console.log(this.forms.a_encode.groupValue);
    //     this.forms.a_bitrate.min = 48000;
    //     this.forms.a_bitrate.max = 320000;
    //   }
    // },
    //  编辑参数设备
    handleSubmits() {
      console.log(
        "=========================编辑参数设备========================="
      );
      // console.log(record,1111)
      // console.log(this.props);
      const that = this;
      let arr = [];

      // 码流封装方式 package_format
      this.forms.package_format.groupValue.forEach((item) => {
        if (this.forms.package_format.defaultValue.name === item.name) {
          this.forms.package_format.defaultValue.key = item.key;
          console.log(222);
          console.log(item.key, 9999);
        }
      });

      // 视频编码 v_encode
      this.forms.v_encode.groupValue.forEach((item) => {
        if (this.forms.v_encode.defaultValue.name === item.name) {
          this.forms.v_encode.defaultValue.key = item.key;
          console.log(222);
          console.log(item.key, 9999);
        }
      });

      // 视频分辨率 v_resolution
      this.forms.v_resolution.groupValue.forEach((item) => {
        if (this.forms.v_resolution.defaultValue.name == item.name) {
          this.forms.v_resolution.defaultValue.key = item.key;
          console.log(3333);
          console.log(item.key, 8888);
        }
      });

      // 音频编码 a_encode
      this.forms.a_encode.groupValue.forEach((item) => {
        if (this.forms.a_encode.defaultValue.name === item.name) {
          this.forms.a_encode.defaultValue.key = item.key;
          console.log(222);
          console.log(item.key, 9999);
          // arr.push(item.key);
        }
        console.log(item.name);
      });

      // 编码档次 profile
      this.forms.profile.groupValue.forEach((item) => {
        if (item.name == this.forms.profile.defaultValue.name) {
          this.forms.profile.defaultValue.key = item.key;
          console.log(item.key, "99999");
          console.log(this.forms.profile.defaultValue.key, "000000");
        }
      });

      // 码率控制 rc_mode
      this.forms.rc_mode.groupValue.forEach((item) => {
        if (item.name == this.forms.rc_mode.defaultValue.name) {
          this.forms.rc_mode.defaultValue.key = item.key;
          console.log(item.key, "99999");
          console.log(this.forms.rc_mode.defaultValue.key, "000000");
        }
      });

      // 取值范围------------------------------------
      if (
        this.forms.v_bitrate.defaultValue <=
          this.forms.v_bitrate.groupValue[1] &&
        this.forms.v_bitrate.defaultValue >= this.forms.v_bitrate.groupValue[0]
      ) {
        console.log("===取值正确=====");
      } else {
        this.$message.warning("操作失败,视频码率超出范围!");
        return;
      }

      if (
        this.forms.v_framerate.defaultValue <=
          this.forms.v_framerate.groupValue[1] &&
        this.forms.v_framerate.defaultValue >=
          this.forms.v_framerate.groupValue[0]
      ) {
        console.log("===取值正确=====");
      } else {
        this.$message.warning("操作失败,视频帧率超出范围!");
        return;
      }

      if (
        this.forms.a_samplerate.defaultValue <=
          this.forms.a_samplerate.groupValue[1] &&
        this.forms.a_samplerate.defaultValue >=
          this.forms.a_samplerate.groupValue[0]
      ) {
        console.log("===取值正确=====");
      } else {
        this.$message.warning("操作失败,音频采样率超出范围!");
        return;
      }

      if (
        this.forms.a_bitrate.defaultValue <=
          this.forms.a_bitrate.groupValue[1] &&
        this.forms.a_bitrate.defaultValue >= this.forms.a_bitrate.groupValue[0]
      ) {
        console.log("===取值正确=====");
      } else {
        this.$message.warning("操作失败,音频码率超出范围!");
        return;
      }

      const formData = {
        // this.cameraId = record.cameraId,
        id: this.cameraId,
        package_format: this.forms.package_format.defaultValue.key,
        v_encode: this.forms.v_encode.defaultValue.key,
        v_framerate: Number(this.forms.v_framerate.defaultValue),
        v_bitrate: Number(this.forms.v_bitrate.defaultValue),
        v_resolution: this.forms.v_resolution.defaultValue.key,
        a_encode: this.forms.v_encode.defaultValue.key,
        a_samplerate: Number(this.forms.a_samplerate.defaultValue),
        a_bitrate: Number(this.forms.a_bitrate.defaultValue),
        profile: this.forms.profile.defaultValue.key,
        rc_mode: this.forms.rc_mode.defaultValue.key,
      };
      console.log(this.item);
      console.log(this.forms.a_encode);
      console.log(formData.a_encode);
      console.log(formData);
      cameraTbdEdit(formData).then((res) => {
        if (res.code == "00000") {
          that.$emit("ok");
          this.$message.success("操作成功");
          this.close();
          // if (this.forms.v_framerate > 60 || this.forms.v_framerate < 5) {
          //   // alert('输入超出范围')
          //   this.$message.warning("操作失败,视频帧率超出范围!");
          // }
          // // else if (this.forms.v_bitrate > 320000 || this.forms.v_bitrate < 32){
          // //   this.$message.warning("操作失败,视频码率超出范围!");
          // // }
          // else {
          //   this.$message.success("操作成功");
          //   this.close();
          // }
        } else {
          this.$message.warning("操作失败");
        }
      });
    },
    handleCancel() {
      this.close();
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.drawer-bootom-button {
  /* position: absolute; */
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
